<template>
    <view class="py-outer-content ">
        <view class="py-content">
            <!-- u-search高度为34px -->
            <u-search placeholder="请输入名称" bgColor="white" v-model="queryParams.name" @search="handleQuery"
                @clickIcon="handleQuery" :showAction="false"></u-search>
        </view>


        <view class="py-list-content">

            <!-- 高度多减去5px -->
            <u-list :scrollable="false"
                :height="windowHeight ? 'calc('+ windowHeight + ' - 10rpx - 10rpx - 34px - 5px)' : ''">
                <view v-for="(item, index) in List" :key="index">
                    <py-swipe-action :subTitle="item.procInsId" :thirdTitle="item.createTime"
                        :tagText="item.finishTime == null ? '进行中' : '已完成'"
                        :tagType="item.finishTime == null ? 'primary' : 'success'" :rightOptions="swipeActionOptions"
                        @click="(e) => handleSwipeClick(e, item)">{{item.procDefName}}</py-swipe-action>
                    <u-line></u-line>
                </view>

                <u-divider text="加载更多" v-if="hasLoadmoreButton" @click="handleLoadmoreButtonClick"></u-divider>
                <u-loadmore :status="loadmoreStatus" v-if="hasLoadmore" />
            </u-list>

        </view>

        <!-- 弹出层 -->
        <py-popup :show="popupShow" mode="bottom" @close="popupShow = false;">
            <view>
                
                <py-section title="流程编号" :text="currentProcess.procInsId"></py-section>
                <py-section title="流程名称" :text="currentProcess.procDefName"></py-section>
                <py-section title="流程类别">
                    <py-dict-tag :dictOptions="categoryOptions" :dictValue="currentProcess.category"></py-dict-tag>
                </py-section>
                <py-section title="流程版本">
                    <py-tag :text="'v' + currentProcess.procDefVersion" type="success" plain></py-tag>
                </py-section>
                <py-section title="提交时间" :text="currentProcess.createTime"></py-section>
                <py-section title="流程状态">
                    <py-tag :text="currentProcess.finishTime == null? '进行中' : '已完成'"
                        :type="currentProcess.finishTime == null? 'primary' : 'success'" plain></py-tag>
                </py-section>
                <py-section title="耗时" :text="currentProcess.duration"></py-section>
                <py-section title="当前节点" :text="currentProcess.taskName"></py-section>
                <py-section title="办理人" :text="currentProcess.assigneeName"></py-section>
                <py-section title="部门" :text="currentProcess.assigneeDeptName"></py-section>
            </view>
        </py-popup>


    </view>
</template>
<script>
    import { getAllProcess } from "@/api/flowable/py";
    import { getWindowHeight } from "@/utils/py";
    export default {
        data() {
            return {
                // 流程列表
                List: [],
                // 总条数
                total: 0,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: undefined
                },
                // 窗口高度（去掉导航栏）
                windowHeight: undefined,

                // 加载更多状态
                loadmoreStatus: "nomore",

                // 加载更多是否显示
                hasLoadmore: false,

                // 是否显示加载更多按钮
                hasLoadmoreButton: false,

                // 滑动单元格按钮选项
                swipeActionOptions: [
                    {
                        text: "查看",
                        style: {
                            backgroundColor: '#2979ff'
                        }
                    },
                    {
                        text: "详细",
                        style: {
                            backgroundColor: '#19be6b'
                        }
                    }
                ],
                // 弹出层是否显示
                popupShow: false,

                // 当前流程信息
                currentProcess: {},

                // 流程类别选项
                categoryOptions: []



            }
        },
        onLoad: function () {

            // 获取窗口高度
            this.getWindowHeight();

            // 获取列表信息
            this.getList();

            // 获取流程类别选项
            this.getCategoryOptions();
        },
        methods: {

            // 获取窗口高度
            getWindowHeight() {
                getWindowHeight().then(response => {
                    this.windowHeight = response;
                })
            },

            // 获取流程类别选项
            getCategoryOptions() {
                this.getDicts("sys_process_category").then(response => {
                    this.categoryOptions = response.data;
                });
            },

            // 获取列表信息
            getList() {
                this.$modal.loading("正在获取数据...");
                this.queryParams.pageNum = 1;
                getAllProcess(this.queryParams).then(response => {
                    let data = response.data;
                    this.List = data.records;
                    this.total = data.total;
                    let pageSize = this.queryParams.pageSize;

                    if (this.total > pageSize) {
                        this.hasLoadmoreButton = true;
                        this.hasLoadmore = false;
                    } else {
                        this.hasLoadmoreButton = false;
                        this.loadmoreStatus = "nomore";
                        this.hasLoadmore = true;
                    }
                    this.$modal.closeLoading();
                });
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },

            // 往已有信息中加入信息
            addList() {
                getAllProcess(this.queryParams).then(response => {
                    let data = response.data;
                    this.List.push(...data.records);
                    this.total = data.total;

                    let hasAllData = this.hasAllData();
                    // 如果加载全部数据
                    if (hasAllData) {
                        this.loadmoreStatus = "nomore";
                    } else {
                        this.hasLoadmore = false;
                        this.hasLoadmoreButton = true;
                    }
                    this.$modal.closeLoading();
                });
            },

            // 是否获取全部数据
            hasAllData() {
                let pageNum = this.queryParams.pageNum;
                let pageSize = this.queryParams.pageSize;
                let total = this.total;
                return pageNum * pageSize < total ? false : true;
            },

            // 处理加载更多按钮点击操作
            handleLoadmoreButtonClick() {
                this.hasLoadmoreButton = false;
                this.loadmoreStatus = "loading";
                this.hasLoadmore = true;
                let hasAllData = this.hasAllData();
                // 如果已经有全部数据
                if (hasAllData) {
                    this.loadmoreStatus = "nomore";
                    return;
                }

                this.queryParams.pageNum++;
                this.addList();
            },

            // 处理滑动点击操作
            handleSwipeClick(e, item) {
                let currentIndex = e.index;
                switch (currentIndex) {
                    case 0:
                        this.currentProcess = item;
                        this.popupShow = true;
                        break;
                    case 1:
                        this.goDetailPage(item);
                        break;
                    default:
                        break;
                }
            },

            // 前往详细页面
            goDetailPage(item) {
                let url = "/pages/flowable/myProcess/detail/index?deployId=" + item.deployId + "&procInsId=" + item.procInsId + "&taskId=" + item.taskId;
                this.$tab.navigateTo(url);
            }
        },
    }
</script>